Fabric.js 是什麼？

Fabric.js 是一個開源的 JavaScript 庫 GitHub - fabricjs/fabric.js，為 HTML5 canvas提供了互動式對象模型。
在原生canvas之上提供了交互式對象模型，透過比 canvas 更好操作的的 api 就可以在畫布上作用。

官網在這：
Fabric.js Javascript Canvas Library (fabricjs.com)
上面有很多小 demo，可以去玩看看

主要特點：

提供了豐富的圖形操作功能：將canvas中的元素視為可操作的對象

你只要新增一個物件，Fabric.js 的 default 值就已經讓這個物件自帶控制項，可以直接操控（放大縮小、旋轉、壓縮、移動）

操作也包含文字編輯，文字字型顏色、底色、樣式都是可以設定的，文字區塊也是可以像其他物件一樣可被拖拉縮放

有繪圖筆刷功能，內建不同線條圖樣，且可以把畫好的線條馬上變成一個物件來控制

支持互動式圖形界面開發：有拖拽、縮放、旋轉等互動操作的 api 可以使用

還有更多互動性的 api 可以使用，甚至可以自定義不同的行為作為觸發事件
（他的物件還支援 mouse event ! ）

序列化：可以將 canvas 狀態轉換為 JSON，方便保存和恢復

意思是：

1. 你可以把現在畫布狀態轉換為 JSON 存起來，下次編輯器再次引入這隻 JSON 檔，所有圖像還會是可以移動、編輯的狀態
2. 可以把過程中的一舉一動都用當下的物件狀態 JSON 記錄下來，方便執行上一步、下一步這種功能時的文件狀態紀錄

SVG支持：可以導入和導出SVG

也可以轉換成各種其他類型的圖檔(jpg, png, Base64...等都可以)

動畫效果：提供了簡單的動畫API

你的畫布上的東西不只可以被你移來移去，同時也可以是動態的

你也可以上傳自己的圖片，並對他做動態或靜態的處理都可以

應用場景：

• 圖形編輯器
• 互動式圖表
• 遊戲開發
• 圖片處理工具
• 在線設計工具 (如 canva 這類的)

優勢：

• 跨瀏覽器兼容性好=> 其實只要 canvas 可以使用的地方，基本上 fabric.js 都可以運行
• 他的官網樣式雖然看起來有點陽春簡單，但其實文件都算蠻清楚的 JSDoc: Home (fabricjs.com)
• 性能優良，適合複雜應用，寫起來比使用純 canvas 還要簡潔的多

Fabric.js 提供高級API，大大簡化了控制 canvas （與canvas 物件互動） 的痛苦程度，讓我們能更容易的創建複雜的圖形應用介面

但如果沒接觸過像 canvas 這類的圖像操作，可能還是需要一些心思來理解他，希望接下來的文章有助於大家能在認識 fabric.js 的路上走得更順暢～